<script setup lang="ts">
import { inject, type Ref } from 'vue';
import type { Log } from '@/env.d'
import { vOverflowEllipsis } from '@/utils/directives'

const log = inject<Log>('log')!
const isExpand = inject<Ref<boolean>>('isExpand')!
</script>

<template>
  <view class="log-content">
    <!-- 标题 -->
    <view
      class="title"
      v-if="log.info?.title"
      v-overflow-ellipsis="isExpand ? 0 : 1"
    >
      {{ log.info?.title }}
    </view>

    <!-- 内容 -->
    <pre
      class="content"
      v-overflow-ellipsis="isExpand ? 0 : 3"
      v-text="log.content"
    ></pre>
  </view>
</template>

<style scoped lang="scss">
.log-content {
  display: flex;
  flex-wrap: wrap;

  .title {
    font-size: 1.2rem;
    font-weight: bolder;
  }

  .content {
    // font-size: 1rem;
    width: fit-content;
    white-space: pre-wrap;
    // 继承父元素的字体
    font-family: unset;
    // 长英语要换行
    word-break: break-all;
  }
}
</style>